<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <style type="text/css">
        .ibox-content{
            background: rgba(239,239,240,0.95);
        }
        .welcome{
            border-bottom: 2px solid rgba(219,219,219,0.95);
            padding: 0px 10px;
            margin-bottom: 20px;
        }
        .infoRow{
            padding: 15px;
            margin: 10px 0 10px 5px;
            background: white;
            border-radius: 5px;
            line-height: 30px;
        }
        .col-sm-3{
            min-width: 130px;
        }
        #avatar{
            height:80px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row welcome">
        <h2 class="welcome-message">欢迎&nbsp;<span class="username"></span>&nbsp;使用GBlog后台管理系统</h2>
    </div>
    <div class="col-sm-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>个人信息</h5>
            </div>
            <div class="ibox-content">
                <div class="row infoRow">
                    <div class="col-sm-3">头像：</div>
                    <img id="avatar" src="/img/head.jpg">
                </div>
                <div class="row infoRow">
                    <div class="col-sm-3">昵称：</div>
                    <span id="nickname"></span>
                </div>
                <div class="row infoRow">
                    <div class="col-sm-3">邮箱：</div>
                    <span id="email"></span>
                </div>
                <div class="row infoRow">
                    <div class="col-sm-3">qq:</div>
                    <span id="qq"></span>
                </div>
                <div class="row infoRow">
                    <div class="col-sm-3">上次登录ip：</div>
                    <span id="lastLoginIp"></span>
                </div>
                <div class="row infoRow">
                    <div class="col-sm-3">登录次数：</div>
                    <span id="loginCount"></span>
                </div>

            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5><i class="fa fa-fire"></i>最近发布</h5>
            </div>
            <div class="ibox-content">
                <div id="vertical-timeline" class="light-timeline">

                </div>
            </div>
        </div>
    </div>

</div>
</body>

<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/plugins/toastr/toastr.min.js"></script>
<script type="text/javascript">
    $(function(){
        getUserInfo();
        getArchives(5);
    });
    function getUserInfo(){
        $.ajax({
            url:'/api/home/getSelfInfo',
            type:'post',
            success:function(resp){
                $(".username").html(resp.data.nickname);
                $("#nickname").html(resp.data.nickname);
                if(resp.data.avatar!=null)
                    $("#avatar").attr("src",resp.data.avatar);
                $("#email").html(resp.data.email);
                $("#loginCount").html(resp.data.loginCount);
                $("#qq").html(resp.data.qq);
                $("#lastLoginIp").html(resp.data.lastLoginIp);
            }
        });
    }
    function getArchives(size){
        $.ajax({
            url:'/api/home/getArchives',
            type:'post',
            data:{
                size:size
            },
            success:function(resp){
                var archivesHtml='';
                for(var i in resp.data) {
                    var archive=resp.data[i];
                    archivesHtml += '\n' +
                        '                    <div class="vertical-timeline-block">\n' +
                        '                        <div class="vertical-timeline-icon navy-bg">\n' +
                        '                            <i class="fa fa-file-text"></i>\n' +
                        '                        </div>\n' +
                        '\n' +
                        '                        <div class="vertical-timeline-content">\n' +
                        '                            <a target="_blank" href="http://guokunjin.cn/article/'+archive.id+'.html">\n' +
                        '                                <p>'+archive.title+'</p>\n' +
                        '                            </a>\n' +
                        '                            <span class="vertical-date">\n' +
                        '                    <small>'+archive.datetime+'</small>\n' +
                        '                </span>\n' +
                        '                        </div>\n' +
                        '                    </div>';
                }
                $("#vertical-timeline").html(archivesHtml);
            }
        });
    }

</script>

</html>